<template>
  <div>
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                  <i class="el-icon-lx-calendar"></i> 公告管理
              </el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="container">
      <div class="header">
        <el-button type="primary" @click="openPublishDialog" class="publish-btn">
          发布公告
        </el-button>
      </div>

      <div class="cards-container">
        <el-card
          v-for="(announcement, index) in tableData"
          :key="announcement.id"
          class="announcement-card"
        >
          <div slot="header" class="announcement-header">
            <span>{{ announcement.topic }}</span>
            <el-tag class="time-tag">{{ announcement.feedTime }}</el-tag>
          </div>
          <div class="announcement-content">
            <p>{{ announcement.content }}</p>
          </div>
          <div class="card-actions">
            <!-- <el-button type="primary" icon="el-icon-edit" @click="handleReply(index, announcement)">回覆</el-button> -->
          </div>
        </el-card>
      </div>
    </div>

    <!-- 发布公告弹出框 -->
    <el-dialog title="发布公告" :visible.sync="publishVisible" width="30%">
      <el-form ref="publishForm" :model="publishForm" label-width="70px">
        <el-form-item label="标题">
          <el-input v-model="publishForm.topic"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="publishForm.content" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="publishVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPublish">发布</el-button>
      </span>
    </el-dialog>

    <!-- 编辑公告弹出框
    <el-dialog title="回覆" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="内容">
          <el-input v-model="form.reply"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import axios from '../../axios/index';
export default {
  name: 'announcementManagement',
  data() {
    return {
      tableData: [], // 公告列表数据
      publishVisible: false, // 控制发布公告弹窗
      publishForm: { // 发布公告表单
        topic: '',
        content: ''
      },
      editVisible: false, // 控制编辑弹窗
      form: {}, // 回覆表单数据
      idx: -1, // 当前选中的索引
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取公告列表
    getData() {
      axios.get('/manager/notice/get')
        .then(response => {
          this.tableData = response.data.map(item => {
            return {
              ...item,
              // 直接使用返回的 time，不需要格式化
              feedTime: item.time, 
            };
          });
        })
        .catch(error => {
          console.error("获取公告失败: ", error);
        });
    },
    // 格式化时间
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    // 打开发布公告弹窗
    openPublishDialog() {
      this.publishVisible = true;
    },
    // 提交发布公告
    submitPublish() {
      const params = {
        topic: this.publishForm.topic,
        content: this.publishForm.content
      };
      axios.post('/manager/notice/insert', params)
        .then(response => {
          this.$message.success('公告发布成功');
          this.publishVisible = false;
          this.getData(); // 重新获取公告列表
        })
        .catch(error => {
          console.error("发布公告失败: ", error);
        });
    },
    // 编辑回覆
    handleReply(index, row) {
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    saveEdit() {
      this.editVisible = false;
      const params = {
        id: this.idx,
        reply: this.form.reply
      };
      axios.post('/manager/notice/reply', params)
        .then(response => {
          this.$message.success(`回覆成功`);
        })
        .catch(error => {
          console.error("回覆失败: ", error);
        });
    }
  }
};
</script>



<style scoped>
.container {
  margin-top: 20px;
  min-height: 600px;
}

.header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  background-color: white;
}

.publish-btn {
  margin-right: 20px;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 控制卡片之间的间距 */
  justify-content: flex-start; /* 保证卡片从左侧开始排列 */
  align-items: flex-start; /* 保证卡片顶端对齐 */
  margin-top: 20px;
}

.announcement-card {
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.announcement-content {
  margin-top: 10px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.time-tag {
  background-color: #f56c6c;
  color: white;
}
</style>
